<template>
  <div class="xtx-bread-item">
    <router-link v-if="to" :to="to">
      <slot/>
    </router-link>
    <span v-else><slot/></span>
  </div>
  <!--<i class="iconfont icon-angle-right"></i>-->
</template>

<script>

export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: [String, Object],
      default: ''
    },
    // key: {
    //   type: [Number, String],
    //   default: '0'
    // }
  }
}
</script>

<style lang="less" scoped>
.xtx-bread-item {
  a {
    color: #666;
    transition: all 0.4s;

    &:hover {
      color: @xtxColor;
    }
  }
}

.iconfont {
  font-size: 12px;
  margin: 0 5px;
  line-height: 22px;
  // 样式的方式, 切换成 render 与 h函数
  //// 使用css样式, 控制最后一个右箭头消失
  //&:last-child {
  //  display: none;
  //}
}

</style>
